<template>
  <div class="returns">
      <div class="head">
       <p style="font-weight: 700;margin:0">退货率分析</p>

      </div>
      <div class="content">
        <el-row :span="6">
         <el-col  :span="12">
       <p style="font-size:13px;color:#999999">退款单数</p>
       </el-col>
       <el-col  :span="12">
       <p style="font-size:13px;color:#999999">退单率</p>
       </el-col>
       </el-row>


       <el-row :span="6">
         <el-col  :span="12">
          <p class="returns-number">20</p>          
          <p class="returns-date">今日</p>
       </el-col>
       <el-col  :span="12">
         <!-- <div class="returnsEcharts" ref="chart"  style="width: 100%; height: 100%;"> </div>  -->
         <el-progress type="circle" :percentage="25"></el-progress>

       </el-col>
       </el-row>
       <el-row :span="6">
         <el-col  :span="12">
          <p class="returns-number">20</p>          
          <p class="returns-date">昨日</p>
       </el-col>
       <el-col  :span="12">
         <!-- <div class="returnsEcharts" ref="chart"  style="width: 100%; height: 100%;"> </div>  -->
         <el-progress type="circle" :percentage="25"></el-progress>

       </el-col>
       </el-row>
       <el-row :span="6">
         <el-col  :span="12">
          <p class="returns-number">20</p>          
          <p class="returns-date">近七天</p>
       </el-col>
       <el-col  :span="12">
         <!-- <div class="returnsEcharts" ref="chart"  style="width: 100%; height: 100%;"> </div>  -->
         <el-progress type="circle" :percentage="25"></el-progress>

       </el-col>
       </el-row>


      </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
// mounted(){

//     this.show()
// },
// methods:{

//     show(){
//  const chartDoms = document.querySelectorAll('.returnsEcharts');

//  chartDoms.forEach((dom) => {
//   const chartInstance = echarts.getInstanceByDom(dom);

//   if (!chartInstance) {
//     // 如果当前dom元素没有对应的echarts实例对象，就创建一个
//     const myChart = echarts.init(dom);

//     // 设置数据和配置项
//     const option = {
//   tooltip: {
//     trigger: 'item',
//     formatter: '{a} <br/>{b}: {c} ({d}%)'
//   },
//   color: ['red', '#ccc'],

//   series: [
//     {
//       name: 'XXX站点超标率',
//       type: 'pie',
//       center: ['50%', '50%'], // 饼图的圆心坐标
//       radius: ['70%', '80%'],
//       avoidLabelOverlap: false,
//       hoverAnimation: false,
   
//       label: {
//         //  饼图图形上的文本标签
//         normal: {
//           // normal 是图形在默认状态下的样式
//           show: true,
//           position: 'center',
//           fontWeight: 'bold',
//           formatter: ' {a|{d}%}\n{b|{b}}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
//           rich: {
//             a: {
//               color: '#03a9f4',
//               fontSize: 16
//             }
            
//           }
//         }
//       },

//       labelLine: {
//         normal: {
//           show: false
//         }
//       },
//       data: [
//         {
//           // 退单数
//           value: 40,
//           label: {
//             normal: {
//               show: true
//             }
//           }
//         },
//         {
//           // 未退单数
//           value: 60,
//           label: {
//             normal: {
//               show: false
//             }
//           }
//         }
//       ]
//     }
//   ]
// };
// ;
//     myChart.setOption(option);

//     // 将当前dom元素和echarts实例对象绑定
//     myChart.group = 'chartGroup';
//     myChart.id = dom.getAttribute('id') || `chart-${Math.random().toString(36).substr(2)}`;
//   }
// });


// // var myChart = echarts.init(chartDom);
// //   var option = {
// //   tooltip: {
// //     trigger: 'item',
// //     formatter: '{a} <br/>{b}: {c} ({d}%)'
// //   },
// //   color: ['red', '#ccc'],
// //   series: [
// //     {
// //       name: 'XXX站点超标率',
// //       type: 'pie',
// //       center: ['50%', '50%'], // 饼图的圆心坐标
// //       radius: ['70%', '80%'],
// //       avoidLabelOverlap: false,
// //       hoverAnimation: false,
// //       label: {
// //         //  饼图图形上的文本标签
// //         normal: {
// //           // normal 是图形在默认状态下的样式
// //           show: true,
// //           position: 'center',
// //           fontWeight: 'bold',
// //           formatter: ' {a|{d}%}\n{b|{b}}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
// //           rich: {
// //             a: {
// //               color: '#03a9f4',
// //               padding: [0, 10],
// //               fontSize: 40
// //             },
// //             b: {
// //               color: 'red',
// //               padding: [0, 10],
// //               fontSize: 20
// //             }
// //           }
// //         }
// //       },

// //       labelLine: {
// //         normal: {
// //           show: false
// //         }
// //       },
// //       data: [
// //         {
// //           value: 40,
// //           name: '超标',
// //           label: {
// //             normal: {
// //               show: true
// //             }
// //           }
// //         },
// //         {
// //           value: 60,
// //           name: '正常',
// //           label: {
// //             normal: {
// //               show: false
// //             }
// //           }
// //         }
// //       ]
// //     }
// //   ]
// // };
// // option && myChart.setOption(option);


//     }
// }
}
</script>

<style scoped>
* {
  padding: 0;
}
.head {
  padding-left: 20px;
  line-height: 50px;
  margin:0
}
.content {
  padding: 20px;
}
 .el-row {
    margin-bottom: 20px;
    text-align: center;
   
  }
  .returns-number {
    font-size: 28px;
    color:#666
  }
.returns-date {
  font-size: 14px;
  color: #999999;
}
</style>